<template>
    <div>
        <div class="left"> 
            <div class="card"> 
                <div class="card_title"><i></i>
                <div>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '预警统计'}" @click="changeSubTitle('预警统计')">预警统计</span>
                    <span style="color: #00FFFF;margin: 0 6px">|</span>
                    <span class="sub_title" :class="{b_a_color: currentIndex === '设备监控'}" @click="changeSubTitle('设备监控')">设备监控</span>
                </div>
                <i class="more_icon"></i></div> 
            </div>
            <div class="card mar14"> 
                <div class="card_title"><i></i>设备控制<i class="more_icon"></i></div> 
                <div class="cardl2_body">
                    <div v-for="item in 6" :key="item">
                        <p>监测设备{{ item }}</p>
                        <div>
                            <el-switch v-model="devCtrl[`value${item}`]" active-color="#63E1FF" inactive-color="#DCDFE6" active-text="开启" inactive-text="关闭"> </el-switch>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mar14 cardl3"> 
                <div class="card_title"><i></i>设备故障概览<i class="more_icon"></i></div> 
                <div class="cardl3_body">
                    <div class="title">设置故障数量<span>120个</span></div>
                    <div class="flex">
                        <div class="device_manage" style="padding: 6px 0;">
                            <span class="icon_z" :style="{'--background': '#0092F6'}"></span>
                            <span>已维修</span>
                            <span style="color:#58C6E1">110个</span>
                        </div>
                        <div class="device_manage" style="padding: 6px 0;margin-left: 14px;">
                            <span class="icon_z" :style="{'--background': '#FCE173'}"></span>
                            <span>未维修</span>
                            <span style="color:#58C6E1">10个</span>
                        </div>
                    </div>
                    <div id="devBreakdown"></div>
                    <div class="table-box">
                        <table border="0">
                            <thead>
                                <tr class="table_title">
                                    <th>序号</th> 
                                    <th>设备名称</th> 
                                    <th>故障原因</th> 
                                    <th>故障时间</th> 
                                </tr>
                            </thead>
                            <tbody class="custom_tbody table_tbody">
                                <tr class="tr1" v-for="(data, i) in tableList" :key="i">
                                    <td>{{ data.num }}</td> 
                                    <td>{{ data.devName }}</td> 
                                    <td>{{ data.result }}</td> 
                                    <td>{{ data.time }}</td> 
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card mar14"> 
                <div class="card_title"><i></i>设备管理</div> 
                <div class="device_manage flex">
                    <div v-for="item in lengedList" :key="item.name">
                        <span class="icon_z" :style="{ '--background': item.bg }"></span>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="device_manage_body">
                    <div v-for="item in 42" :key="item" :class="item%5 === 0? 'bg3' : item%5 === 1? 'bg2' : 'bg1'">{{ item }}</div>
                </div>
            </div>
        </div>
        <div class="right"> 
            <div class="card_title right_card_title"><i></i>重点监控画面<i class="more_icon"></i></div> 
            <div class="right_card_content">
                <div v-for="item in rightList" :key="item">
                    <img src="~@static/img/监控图.png" alt="">
                    <p>{{item}}监控区</p>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
export default {
    data(){
        return{ 
            rightList: ["A","B","C","D"],
            currentIndex: "设备监控",
            devCtrl:{
                value1: true,
                value2: true,
                value3: false,
                value4: true,
                value5: true,
                value6: false
            },
            lengedList: [
                {name: "正常", bg: "#2F93D860"},
                {name: "离线", bg: "#A9D3DD"},
                {name: "损坏", bg: "#C9E1A1"},
            ],
            tableList: [
                {num: "01", devName: "设备1", result: "损坏", time: "2024.8.18"},
                {num: "02", devName: "设备2", result: "老化", time: "2024.8.18"},
                {num: "03", devName: "设备3", result: "老化", time: "2024.8.18"},
            ]
        }
    },

    mounted(){
        this.initBar();
    },

    methods: {
        changeSubTitle(data){
            this.currentIndex = data;
            if(data === '预警统计'){
                this.$router.push("/Warning");
                this.$bus.$emit("send-Message","P3.1");
            }else{ 
                this.$bus.$emit("send-Message","P3.2");
            }
        },
        initBar(){
            let _this = this;
            var chartDom = document.getElementById("devBreakdown");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            var option = { 
                grid: {
                    top: '0',
                    left: '-10%',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                },
                xAxis: {
                    show: false, 
                },
                yAxis: {
                    show: false,
                    type: 'category', 
                    axisLabel: {
                        color: 'rgba(255,255,255,0.8)',
                    },
                },
                series: [
                    {
                        name: '已维修',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false,
                        },
                        emphasis: {
                            focus: 'series',
                        }, 
                        barWidth: 20,
                        itemStyle: {
                            label: {
                                show: true,
                            },
                            labelLine: {
                                show: false,
                            },
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: 'rgba(0,146,246,0.2)' },
                                { offset: 1, color: 'rgba(0,146,246,1)' },
                            ]),
                            borderColor: 'rgba(0,146,246,0.7)',
                            shadowBlur: 16,
                            shadowColor: 'rgba(0,146,246,1)',
                        },
                    },
                    {
                        name: '未维修',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false,
                        },
                        emphasis: {
                            focus: 'series',
                        }, 
                        barWidth: 12,
                        itemStyle: {
                            label: {
                                show: true,
                            },
                            labelLine: {
                                show: false,
                            },
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: 'rgba(252,225,115,0)' },
                                { offset: 1, color: 'rgba(252,225,115,1)' },
                            ]),
                            borderColor: '#FCE173',
                            shadowBlur: 16,
                            shadowColor: '#FCE173',
                        },
                    },
                ],
                dataset: {
                    source: [
                        { status: '维修', value1: 110, value2: 10 }, 
                    ],
                },
            };
            chart.setOption(option);
        }, 
    }
}
</script>

<style lang="scss" scoped> 
@import "@/assets/styles/overView.scss";
.right{
    width: 360px;
    height: calc(100% - 16px);
    background: url("~@static/img/BGComp_c.png") no-repeat 0 0/100% 100%;
    >div{
        background: unset !important;
        width: 100%;
    }

    .right_card_title{
        margin: 14px 0;
    }
    .right_card_content{
        height: calc(100% - 58px);  
        padding: 0 16px 16px;
        box-sizing: border-box; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        >div{
            width: 100%;
            height: calc(25% - 10px);
            background: url("~@static/img/监控_框.png") no-repeat 0 0/100% 100%;    
            padding: 4px;
            box-sizing: border-box;
            img{
                height: calc(100% - 30px);
                width: 100%;
            }
            p{
                line-height: 24px;
                text-align: center;
                font-size: 16px;
                color: #CFDFFC;
            }
        }
    }
} 

.sub_title{
    font-size: 16px;
    cursor: pointer;
}
.b_a_color{
    color: #1FD7FF;
}
.mar14{
    margin-top: 14px;
}
.cardl2_body{
    display: grid; 
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 4px 10px;
    >div{
        background-color: #04161F;
        border: 1px solid #114980;
        border-radius: 6px;
        padding: 4px 6px;
        p{
            color: #fff;
            margin-bottom: 6px;
            font-size: 14px;
        }
        >div:nth-of-type(1){
            text-align: right;
        }

        /deep/ .el-switch__label{
            color: #fff;
        } 
        /deep/ .is-active{
            color: #17ECFB !important;
        }
    }
}

.device_manage{
    font-size: 14px;
    color: #FFFFFF;
    padding: 0 12px;
    >div{
        margin-right: 14px;
    }
    .icon_z{
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: var(--background);
    }
} 
.device_manage_body{
    margin: 10px 14px;
    padding: 4px;
    border: 1px solid #03FBFF40;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    >div{
        width: 36px;
        height: 18px;
        text-align: center;
        line-height: 18px;
    }
    .bg1{
        background: url("~@static/img/方框1.png") no-repeat 0 0/100% 100%;
    }
    .bg2{
        background: url("~@static/img/方框2.png") no-repeat 0 0/100% 100%;
    }
    .bg3{
        background: url("~@static/img/方框3.png") no-repeat 0 0/100% 100%;
    }
}
.cardl3{
    height: calc(100% - 624px);
    .cardl3_body{
        height: calc(100% - 30px); 
        padding: 0 14px;
        box-sizing: border-box;
        .title{
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            >span{
                color: #E1B000;
                margin-left: 14px;
            }
        }
    }
}

#devBreakdown{
    height: 30px;
    width: 100%;
}
.table-box{
    height: calc(100% - 68px);
    position: relative;
    top: -14px; 
    overflow-y: auto;
}

thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    text-align: center;
    margin-bottom: 4px;
}
thead {  
    font-size: 12px;
    th{
        font-weight: normal !important;
    }
}

table{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: none;
    font-size: 14px;
    color: #fff;
    tr{
        height: 27px;
        background-color: rgba($color: #ffffff, $alpha: 0.19); 
    }
    .table_title{
        background-color: rgba($color: #ffffff, $alpha: 0.19);
        font-weight: 100;
        height: 40px;
        >th:nth-child(1){
            width: 50px;
            border-right: 1px solid #D9D9D944;
        }
    }
    .tr1{
        // background-color: #333C4C;
        cursor: pointer;
        font-size: 12px;
        >td:nth-child(1){
            width: 50px;
            border-right: 1px solid #D9D9D944;
        }
    }
    .tr2{
        cursor: pointer;
        // background-color: rgba(34,41,55,0.85);
        font-size: 12px;
    }
}
</style>